import React from 'react';
import './assets/styles/index.scss';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
import Loading from './components/Loading';
import history from './utils/history';
import Article from './pages/Article';
import Chat from './pages/Profile/Chat';
import ProfileEdit from './pages/Profile/Edit';
import ProfileFeedback from './pages/Profile/Feedback';
import Search from './pages/Search';
import SearchResult from './pages/Search/Result';
import Test from './pages/Test';
import AuthRoute from './utils/AuthRoute';
import { KeepAlive } from './components/KeepAliveProps';
const Login = React.lazy(() => import('@/pages/Login'));
const Layout = React.lazy(() => import('@/pages/Layout'));
const NotFound = React.lazy(() => import('@/pages/404'));
export default function App() {
  return (
    <div>
      <Router history={history}>
        <React.Suspense fallback={<Loading />}>
          {/* 1. 使用KeepAlive替换Route匹配 */}
          {/* 2. 挪到Switch组件之外 */}
          <KeepAlive activePath="/layout" component={Layout} />
          <Switch>
            <Redirect exact path="/" to="/layout/home" />
            <Route path="/test" component={Test}></Route>
            {/* <Route path="/layout" component={Layout}></Route> */}
            <Route path="/login" component={Login}></Route>
            {/* 不使用 tab 布局的界面 */}
            <Route path="/search" component={Search} exact />
            <Route path="/article/:id" component={Article} />
            <Route path="/search/result" component={SearchResult} />
            <AuthRoute path="/profile/edit" component={ProfileEdit} />
            <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
            <AuthRoute path="/profile/chat" component={Chat} />
            {/* 3. 让404页面和/layou互斥显示 */}
            <Route
              path="*"
              render={(props) => {
                const isLayout = props.location.pathname.startsWith('/layout');
                if (isLayout) return null;
                return <NotFound />;
              }}
            />
          </Switch>
        </React.Suspense>
      </Router>
    </div>
  );
}
